<template>
	<div class="layout">
		<app-load v-show="!isAllLoad"></app-load>
		<app-head v-show="isAllLoad"></app-head>
		<!-- 顶部列表 -->
		<div class="top-list">
			<!-- 列表标题 -->
			<div class="top-title">
				<h3>热门歌手</h3>
				<div class="option">
					<router-link to="/"><img src="@/assets/img/ui/ring.png" /></router-link>
					<router-link to="/"><img src="@/assets/img/ui/current.png" /></router-link>
					<router-link to="/"><img src="@/assets/img/ui/setting.png" /></router-link>
				</div>
			</div>
			<!-- 列表内容 -->
			<ul class="top-content">
				<app-load v-show="!isArtistLoad"></app-load>
				<li v-for="(item, index) in home.artists" :key="index">
					<router-link :to="{ path: '/detail/artists', query: { id: item.id } }">
						<div>
							<img v-lazy="item.src" alt="Loading" />
						</div>
						<span>{{ item.name }}</span>
					</router-link>
				</li>
			</ul>
		</div>

		<!-- 主要内容 -->
		<ul class="main-list">
			<!-- 推荐新歌 -->
			<li>
				<h3 class="main-title">推荐新歌</h3>
				<ol class="main-content">
					<app-load v-show="!isSongLoad"></app-load>
					<li v-for="(item, index) in home.songs" :key="index">
						<router-link :to="{ path: '/detail/songs', query: { id: item.id } }">
							<div>
								<img v-lazy="item.src" alt="Loading" />
							</div>
							<span>{{ item.name }}</span>
						</router-link>
					</li>
				</ol>
			</li>

			<!-- 热门歌单 -->
			<li>
				<h3 class="main-title">热门歌单</h3>
				<ol class="main-content">
					<app-load v-show="!isPlaylistLoad"></app-load>
					<li v-for="(item, index) in home.playlists" :key="index">
						<router-link :to="{
                path: '/detail/playlist',
                query: {
                  id: item.id,
                  name: item.name,
                  creator: item.creator,
                  src: item.src,
                },
              }">
							<div>
								<img v-lazy="item.src" alt="Loading" />
							</div>
							<span>{{ item.name }}</span>
						</router-link>
					</li>
				</ol>
			</li>

			<!-- 新碟上架 -->
			<li>
				<h3 class="main-title">新碟上架</h3>
				<ol class="main-content">
					<app-load v-show="!isAlbumLoad"></app-load>
					<li v-for="(item, index) in home.albums" :key="index">
						<router-link :to="{
                path: '/detail/album',
                query: {
                  id: item.id,
                  name: item.name,
                  artist: item.artist,
                  src: item.src,
                },
              }">
							<div>
								<img v-lazy="item.src" alt="Loading" />
							</div>
							<span>{{ item.name }}</span>
						</router-link>
					</li>
				</ol>
			</li>

			<!-- 推荐节目 -->
			<li>
				<h3 class="main-title">推荐节目</h3>
				<ol class="main-content">
					<app-load v-show="!isProgramLoad"></app-load>
					<li v-for="(item, index) in home.programs" :key="index">
						<router-link :to="{
                path: '/detail/album',
                query: {
                  id: item.id,
                  name: item.name,
                  artist: item.dj,
                  src: item.src,
                },
              }">
							<div>
								<img v-lazy="item.src" alt="Loading" />
							</div>
							<span>{{ item.name }}</span>
						</router-link>
					</li>
				</ol>
			</li>
		</ul>
	</div>
</template>

<script>
	// 引入组件
	import appHead from "@/components/app-head.vue";
	import appLoad from "@/components/app-load.vue";
	// 引入辅助函数
	import {
		mapState
	} from "vuex";
	export default {
		name: "index",
		components: {
			appHead,
			appLoad,
		},
		data() {
			return {
				recent: [], // 最近播放
				isAllLoad: false, // 页面加载完毕
				isArtistLoad: false, // 歌手加载完毕
				isSongLoad: false, // 新歌加载完毕
				isPlaylistLoad: false, // 歌单加载完毕
				isAlbumLoad: false, // 专辑加载完毕
				isProgramLoad: false, // 节目加载完毕
			};
		},
		computed: {
			// 使用辅助函数
			...mapState(["home"]),
		},
		methods: {
			getMusicData() {
				// 获取最近播放
				// axios.get('/login/status').then((data) => {
				//   if (data.code == 200) {
				//     console.log(data.account);
				//   }
				// });
				// 获取热门歌手数据
				axios.get("/top/artists", {
					params: {
						limit: 12
					}
				}).then((data) => {
					if (data.code == 200) {
						// 数据暂存数组
						let arr = [];
						data.artists.forEach((item) => {
							let obj = {};
							obj.name = item.name;
							obj.src = item.picUrl;
							obj.id = item.id;
							// this.artists.push(obj);
							arr.push(obj);
							// 判断数据是否加载
							this.isArtistLoad = true;
						});
						// 将数据提交至vuex
						this.$store.dispatch("home/setArtistsAsync", arr);
					}
				});
				// 获取推荐歌曲数据
				axios
					.get("/personalized/newsong", {
						params: {
							limit: 12
						}
					})
					.then((data) => {
						if (data.code == 200) {
							// 数据暂存数组
							let arr = [];
							data.result.forEach((item) => {
								let obj = {};
								obj.name = item.name;
								obj.src = item.picUrl;
								obj.id = item.id;
								arr.push(obj);
								// 判断数据是否加载
								this.isSongLoad = true;
							});
							// 将数据提交至vuex
							this.$store.dispatch("home/setSongsAsync", arr);
						}
					});
				// 获取热门歌单数据
				axios.get("/top/playlist", {
					params: {
						limit: 12
					}
				}).then((data) => {
					if (data.code == 200) {
						let arr = [];
						data.playlists.forEach((item) => {
							let obj = {};
							obj.name = item.name;
							obj.id = item.id;
							obj.creator = item.creator.nickname;
							obj.src = item.coverImgUrl;
							obj.desc = item.description;
							arr.push(obj);
							// 判断数据是否加载
							this.isPlaylistLoad = true;
						});
						this.$store.dispatch("home/setPlaylistsAsync", arr)
					}
				});
				// 获取新碟上架数据
				axios.get("/album/new", {
					params: {
						limit: 12
					}
				}).then((data) => {
					if (data.code == 200) {
						let arr = [];
						data.albums.forEach((item) => {
							let obj = {};
							obj.name = item.name;
							obj.artist = item.artist.name;
							obj.src = item.picUrl;
							arr.push(obj);
							// 判断数据是否加载
							this.isAlbumLoad = true;
						});
						this.$store.dispatch("home/setAlbumsAsync", arr)
					}
				});
				// 获取推荐节目数据
				axios
					.get("/program/recommend/", {
						params: {
							limit: 12
						}
					})
					.then((data) => {
						let arr = [];
						if (data.code == 200) {
							data.programs.forEach((item) => {
								let obj = {};
								obj.name = item.mainSong.name;
								obj.dj = item.dj.nickname;
								obj.src = item.coverUrl;
								arr.push(obj);
								// 判断数据是否加载
								this.isProgramLoad = true;
							});
							this.$store.dispatch("home/setProgramsAsync", arr)
						}
					});
			},
			getUser() {
				axios.get("/login/status").then((data) => {
					if (data.code == 200) {
						// data.playlists.forEach((item) => {
						//   let obj = {};
						//   obj.name = item.name;
						//   obj.src = item.coverImgUrl;
						//   this.playlist.push(obj);
						// });
					}
				});
			},
			// 判断页面是否加载完毕
			allLoad() {
				if (this.isArtistLoad == true &&
					this.isSongLoad == true &&
					this.isPlaylistLoad == true &&
					this.isAlbumLoad == true &&
					this.isProgramLoad == true) {
					this.isAllLoad = true;
				}
			}
		},
		created() {
			this.getUser();
			this.getMusicData();
		},
		updated() {
			this.allLoad();
		}
	};
</script>

<style lang="scss" scoped>
	.layout {
		color: white;
		background-image: radial-gradient(at 0 0, #666666, #121212 38%);
		overflow: hidden;

		// 顶部列表
		.top-list {
			margin: 50px 0 20px;

			.top-title {
				height: 30px;
				padding-left: 15px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				h3 {
					font-size: 20px;
					letter-spacing: 2px;
				}

				.option {
					height: 30px;
					line-height: 30px;
					padding-right: 15px;
					box-sizing: border-box;

					a {
						height: 30px;
						line-height: 30px;
						display: inline-block;
						padding-left: 10px;

						img {
							width: 24px;
							display: block;
						}

						&:nth-child(1) img {
							width: 27px;
						}

						&:nth-child(2) {
							padding-left: 5px;

							img {
								width: 25px;
								margin-top: 1px;
							}
						}
					}
				}
			}

			.top-content {
				height: 118.8px;
				display: flex;
				margin-top: 15px;
				padding-left: 15px;
				box-sizing: border-box;
				overflow-x: scroll;

				li {
					width: 100px;
					margin-right: 15px;
					flex-shrink: 0;
					overflow: hidden;

					a {
						color: white;

						div {
							width: 100px;
							height: 100px;
							border-radius: 10px;
							overflow: hidden;

							// background-color: springgreen;
							img {
								width: 100%;
								height: 100%;
								// background-color: #414141;
							}
						}
					}

					span {
						margin-top: 2px;
						padding-left: 2px;
						font-size: 13px;
						display: block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}

		// 主要列表
		.main-list {
			margin: 50px 0 100px;

			>li {
				margin-bottom: 50px;

				.main-title {
					padding-left: 15px;
					font-size: 20px;
					letter-spacing: 2px;
				}

				.main-content {
					height: 169.6px;
					display: flex;
					margin-top: 15px;
					padding-left: 15px;
					box-sizing: border-box;
					overflow-x: scroll;

					li {
						width: 150px;
						margin-right: 15px;
						flex-shrink: 0;

						a {
							color: white;

							div {
								width: 150px;
								height: 150px;
								border-radius: 8px;
								overflow: hidden;

								// background-color: springgreen;
								img {
									width: 100%;
									// background-color: #414141;
								}
							}

							span {
								margin-top: 2px;
								padding-left: 2px;
								font-size: 13px;
								display: block;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		opacity: 0;
	}
</style>
